<template>
    <div class="bodyDiv" style="margin-top: 60px;padding-top: 10px">
        <div style="width: 70%; margin: 0 auto; margin-top: 50px;">
            <!--广告牌子-->
            <div style="display: flex; margin-top: 10px;height: 600px">
                <el-card style="margin-right: 10px; width: 20%;">
                    <div slot="header" style="display: flex;justify-content: left">
                        <span style="font-weight: bolder">全部标签</span>
                    </div>
                    <div style="display: flex; flex-wrap: wrap">
                        <el-link v-for="(item,index) in typeList" :key="index" style="margin: 5px">{{item}}</el-link>
                    </div>
                </el-card>
                <div style="height: 600px;width: 80%">
                    <el-carousel height="400px" direction="vertical" :autoplay="false">
                        <el-carousel-item v-for="item in 3" :key="item" style="background-color: #606060;">
                            <h3 class="medium">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                    <el-card class="box-card" style="margin-top: 10px;height: 190px;">
<!--                        <div slot="header" style="display: flex;justify-content: left">
                            <span>搜索热词</span>
                        </div>-->
                        <el-input placeholder="请输入内容搜索" v-model="input3" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" style="background-color: #f4ffb8;border-color: #a0d911;color: #a0d911">搜索</el-button>
                        </el-input>
                        <div style="display: flex">
                            <div>
                                <h4>搜索热词</h4>
                            </div>
                            <div style="padding: 15px;display: flex; flex-wrap: wrap">
                                <el-tag v-for="(item,index) in typeList" :key="index" style="margin: 5px">{{item}}</el-tag>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <div style="display: flex;margin-top: 10px;margin-bottom: 10px">
                <div style="width: 50%;background-color:white;margin-right: 10px;">
                    <el-card>
                        <div slot="header" style="display: flex;justify-content: space-between">
                            <span style="font-weight: bolder">热门景区</span>
                        </div>

                        <div style="display: flex;flex-wrap: wrap;justify-content: space-around">
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                        </div>
                    </el-card>
<!--                    <el-card v-for="(item,index) in spotList" :key="index" :body-style="{ padding: '0px' }" style="text-align: left; margin-bottom: 5px;">
                        <img src="../assets/yunhai.jpg" class="image" style="width: 100%">
                        <div style="padding: 14px;">
                            <h4>{{item.name}}</h4>
                            <div class="bottom" style="display: flex; justify-content: space-between;margin-top: 10px;align-items: center;">
                                <span>{{item.text}}</span>
                                <el-button type="text" class="button">立即购票</el-button>
                            </div>
                        </div>
                    </el-card>-->
                </div>
                <div style="width: 50%;">
                    <el-card>
                        <div slot="header" style="display: flex;justify-content: space-between">
                            <span style="font-weight: bolder">今日推荐</span>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;justify-content: space-around">
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                            <spot-card></spot-card>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <div class="tail" style="width: 100%;height:200px;background-color: #f4ffb8;margin: 0">
            <p>developed by lark chan</p>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    import SpotCard from "./items/SpotCard";
    export default {
        name: "Home",
        components: {SpotCard},
        data(){
            return{
                typeList:[
                    '风景',
                    '游乐',
                    '美食',
                    '登山',
                    '海滨',
                    '人文',
                    '自然'
                ],
                spotList:[
                    {
                        id:'0001',
                        name:'黄山景区',
                        text:'黄山景区i都发送递减法哦个i奥i放假哦啊我i发的撒过后'
                    },
                    {
                        id:'0002',
                        name:'香山景区'
                    },
                    {
                        id:'0003',
                        name:'邓浩然故居'
                    },
                    {
                        id:'0004',
                        name:'芳华园'
                    },
                ],
            }
        },
        mounted() {
          this.getList()
        },
        methods:{
            async getList(){
                axios.post('http://localhost:3000/search',{queryString:'北京'}).then(res=>{
                    console.log(res)
                })
            }
        }
    }
</script>

<style scoped>
    .bodyDiv{
        margin: 0;
        padding: 0;
        margin-top: 10px;
    }
    .row{
        width: 50%;
        display: flex;
        flex-flow: column;
        margin: 5px;
    }
    .item{
        text-align: left;
    }
</style>
